<template>
	<view class="to-report">
		<van-notice-bar left-icon="info-o" wrapable text="查看投诉举报填报帮助" @click="toPreview" />

		<view class="body-contair">
			<view class="form-list">
				<view class="form-item" v-if="id">
					<span class="item-label">举报编号:</span>
					<input class="item-content item-input" :value="form.no" disabled />
				</view>
				<view class="form-item form-align-top require-item">
					<span class="item-label">工程地点:</span>
					<!-- <p v-if="form.address" class="item-content item-input" @click="toSelectAddress">
						{{ form.address ? form.address : "请选择工程地点" }}
					</p> -->
					<textarea class="item-content item-input" auto-height :value="form.address"
						:disabled="!addressInput && canEdit" placeholder="请输入工程地点" />
					<van-button v-if="canEdit" class="item-other divider" size="mini" @click="toSelectAddress">
						选择
					</van-button>
				</view>
				<view class="form-item require-item">
					<span class="item-label">工程名称:</span>
					<input class="item-content item-input" :value="form.proName" :disabled="!canEdit"
						placeholder="请输入工程名称" id="proName" @input="onInputChange" />
				</view>
				<view class="form-item form-align-top require-item">
					<span class="item-label">类型:</span>
					<p v-if="form.struct" class="item-content item-input" @click="onPopShow(true)">
						{{ form.struct ? form.struct : "请选择投诉类型" }}
					</p>
					<input v-if="!form.struct" class="item-content item-input" :value="form.struct" disabled
						placeholder="请选择投诉类型" @click="onPopShow(true)" />
				</view>
				<view class="form-item form-align-top require-item">
					<span class="item-label">投诉问题:</span>
					<van-checkbox-group class="item-content item-radio" :value="checkedList" @change="onProblemsChange">
						<van-checkbox v-for="(item, index) in form.problemsList" :key="index"
							custom-class="radio-custom" :name="index" shape="square" checked-color="#7C96F3">
							{{ item.name }}
						</van-checkbox>
					</van-checkbox-group>
				</view>
				<view class="form-item form-align-top">
					<span class="item-label">其他:</span>
					<textarea class="item-content item-input" auto-height :value="form.other" :disabled="!canEdit"
						id="other" @input="onInputChange" />
				</view>
			</view>

			<view class="form-list upload-box">
				<view class="upload-title"> 现场图片上传 </view>
				<view class="upload-content">
					<van-uploader accept="image" :file-list="form.docsList" :disabled="!canEdit"
						@after-read="afterDocRead" @delete="onDeleteImage" />
				</view>
			</view>

			<view class="form-list">
				<view class="form-item require-item">
					<span class="item-label">举报人:</span>
					<input class="item-content item-input" placeholder="请输入举报人" :value="form.userName"
						:disabled="!canEdit" id="userName" @input="onInputChange" />
				</view>
				<view class="form-item">
					<span class="item-label">微信号:</span>
					<input class="item-content item-input" placeholder="请输入微信号" :value="form.weChat"
						:disabled="!canEdit" id="weChat" @input="onInputChange" />
				</view>
				<view class="form-item require-item">
					<span class="item-label">联系手机:</span>
					<input class="item-content item-input" :disabled="verifyFlag || !canEdit" placeholder="请输入联系手机"
						type="number" :value="form.phone" id="phone" @input="onInputChange" />
				</view>

				<view class="form-item require-item" v-if="canEdit">
					<span class="item-label">验证码:</span>
					<input class="item-content item-input" :disabled="!verifyFlag" placeholder="请输入验证码"
						:value="verifyCode" id="" @input="onInputVerifyCode" />
					<span class="item-other divider" @click="onSendValidCode">
						{{ verifyText }}
					</span>
				</view>

				<view class="form-item" v-if="!canEdit">
					<span class="item-label">处理部门:</span>
					<view class="item-content item-input">
						{{ form.handler ? form.handler : "处理中" }}
					</view>
				</view>
				<view class="form-item" v-if="!canEdit">
					<span class="item-label">处理日期:</span>
					<view class="item-content item-input">
						{{ form.handleDate ? form.handleDate : "处理中" }}
					</view>
				</view>
				<view class="form-item form-align-top" v-if="!canEdit">
					<span class="item-label">处理结果:</span>
					<view class="item-content item-input">
						{{ form.handleResult ? form.handleResult : "处理中" }}
					</view>
				</view>
			</view>
		</view>

		<view class="footer-fixed" v-if="canEdit">
			<van-button type="info" round block color="#7C96F3" @click="submitForm" :disabled="!verifyFlag">
				提交
			</van-button>
		</view>

		<van-popup :show="popShow" position="bottom" @close="onPopShow(false)">
			<van-picker show-toolbar title="投诉类型" :columns="structList" @cancel="onPopShow(false)" value-key="name"
				@confirm="onStructConfirm" @change="onStructChange" />
		</van-popup>
	</view>
</template>

<script>
	import {
		getDataDic,
		sendValidCode,
		saveComplaint,
		getComplaintById,
		getEditState
	} from "@/request/api.js";

	export default {
		data() {
			return {
				canEdit: true,
				addressInput: false,
				id: "",
				form: {
					houseID: "",
					address: "",
					proName: "",
					struct: "",
					other: "",
					userName: "",
					weChat: "",
					phone: "",
					problemsList: [],
					docsList: [],
				},
				popShow: false,
				structList: [],
				checkedList: [],

				verifyFlag: false,
				verifyText: "获取验证码",
				verifyOriCode: "",
				verifyCode: "",
				timeInt: null,
			};
		},

		async onLoad(e) {
			getEditState().then(res => {
				this.addressInput = res
			})

			let proType = await getDataDic("ProType");
			this.structList = proType.result;

			let complaints = await getDataDic("Complaints");

			if (e.edit == "true") {
				this.canEdit = true;
			}
			if (e.edit == "false") {
				this.canEdit = false;
			}

			if (e.id) {
				this.id = e.id;
				getComplaintById(e.id).then((res) => {
					let result = res.data[0];
					result.docsList.forEach((item) => {
						item.url = item.name;
					});
					let checkListTemp = [];
					result.problemsList.forEach((item) => {
						let index = complaints.result.findIndex((value) => {
							return value.name == item.name;
						});
						complaints.result[index].checked = true;
						checkListTemp.push(`${index}`);
					});
					this.form = result;
					this.form.problemsList = complaints.result;
					this.checkedList = checkListTemp;
				});
			} else {
				this.form.problemsList = complaints.result;
			}
		},

		onUnload(e) {
			if (this.timeInt) {
				clearInterval(this.timeInt);
				this.verifyText = "获取验证码"
			}
		},

		methods: {
			toPreview() {
				uni.showLoading({
					title: "正在下载...",
				});
				uni.downloadFile({
					url: this.$config.baseUrl + "/help/tsjb.doc",
					success: (res) => {
						uni.showToast({
							title: "文件下载成功",
						});
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: (res) => {
								console.log("打开文档成功");
							},
						});
					},
					fail: () => {
						uni.showToast({
							icon: "none",
							title: "文件下载失败",
						});
					},
				});
			},

			onPopShow(flag) {
				uni.hideToast();
				if (this.canEdit) {
					this.popShow = flag;
				}
			},

			onInputChange(e) {
				this.form[e.target.id] = e.detail.value;
			},

			onStructConfirm(e) {
				this.form.struct = e.detail.value.name;
				this.onPopShow(false);
			},

			onStructChange(e) {
				uni.showToast({
					icon: "none",
					title: e.detail.value.name,
					duration: 5000,
				});
			},

			onProblemsChange(e) {
				if (this.canEdit) {
					let result = e.detail;
					this.checkedList = result;
					this.form.problemsList.forEach(item => {
						item.checked = false
					})
					result.forEach((index) => {
						this.form.problemsList[+index].checked = true;
					});
				}
			},

			toSelectAddress() {
				if (this.canEdit) {
					uni.$on("handleSelectAddress", (item) => {
						this.form.houseID = item.houseID;
						this.form.address = item.address;
					});
					uni.navigateTo({
						url: "../select_project_address/select_project_address?pageType=0&pageAll=true",
					});
				}
			},

			afterDocRead(e) {
				const {
					file
				} = e.detail;
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				uni.uploadFile({
					url: this.$config.uploadUrl,
					filePath: file.url,
					name: "file",
					formData: {
						filetype: "image",
					},
					success: (res) => {
						// 上传完成需要更新 fileList
						const {
							result
						} = JSON.parse(res.data);
						this.form.docsList.push({
							...file,
							url: result,
						});
					},
				});
			},

			onDeleteImage(e) {
				this.form.docsList.splice(e.detail.index, 1);
			},

			onInputVerifyCode(e) {
				this.verifyCode = e.detail.value;
			},

			onSendValidCode() {
				if (!this.form.phone) {
					uni.showToast({
						icon: "none",
						title: "请输入联系手机",
					});
					return;
				}

				if (this.timeInt) {
					return;
				} else {
					sendValidCode(this.form.phone).then((res) => {
						if (res.code == 1) {
							this.verifyOriCode = res.result;
							this.verifyFlag = true;
							this.setTimeInterval();
						}
					});
				}
			},

			setTimeInterval() {
				if (this.timeInt) {
					return;
				} else {
					let time = 30;
					this.verifyText = `${time}S 后重新发送`;
					this.timeInt = setInterval(() => {
						if (time <= 0) {
							clearInterval(this.timeInt);
							this.timeInt = null;
							this.verifyText = `重新发送`;
						} else {
							time--;
							this.verifyText = `${time}S 后重新发送`;
						}
					}, 1000);
				}
			},

			submitForm() {
				let valid = this.validForm();

				let form = JSON.parse(JSON.stringify(this.form));
				let problemsListTemp = [];
				let problemsListIndex = 0;
				form.problemsList.forEach((item) => {
					if (item.checked) {
						item.sortNO = problemsListIndex++;
						problemsListTemp.push(item);
					}
				});
				form.problemsList = problemsListTemp;

				let docsListTemp = [];
				let docsListIndex = 0;
				form.docsList.forEach((item) => {
					docsListTemp.push({
						name: item.url,
						path: item.url,
						sortNO: docsListIndex++,
					});
				});
				form.docsList = docsListTemp;

				if (this.id) {
					form.id = this.id;
				}

				if (valid) {
					saveComplaint(form).then((res) => {
						uni.navigateBack();
					});
				}
			},

			validForm() {
				if (!this.verifyCode || this.verifyCode != this.verifyOriCode) {
					uni.showToast({
						icon: "none",
						title: "短信验证码错误",
					});
					return false;
				}

				if (
					!this.form.address ||
					!this.form.proName ||
					!this.form.struct ||
					!this.form.userName ||
					!this.form.phone
				) {
					if (!this.form.address) {
						uni.showToast({
							icon: "none",
							title: "请选择工程地点",
						});
					}
					if (!this.form.proName) {
						uni.showToast({
							icon: "none",
							title: "请输入工程名称",
						});
					}
					if (!this.form.struct) {
						uni.showToast({
							icon: "none",
							title: "请选择投诉类型",
						});
					}
					if (!this.form.userName) {
						uni.showToast({
							icon: "none",
							title: "请输入联系人名称",
						});
					}
					// if (!this.form.weChat) {
					// 	uni.showToast({
					// 		icon: "none",
					// 		title: "请输入微信号",
					// 	});
					// }
					if (!this.form.phone) {
						uni.showToast({
							icon: "none",
							title: "请输入联系手机",
						});
					}
					return false;
				}

				if (!(this.checkedList.length > 0)) {
					uni.showToast({
						icon: "none",
						title: "请选择投诉问题",
					});
					return false;
				}

				return true;
			},
		},
	};
</script>

<style lang="scss">
	.to-report {
		display: flex;
		flex-direction: column;
		background-color: #f8f8f8;
		height: 100vh;

		.body-contair {
			flex: 1;
			padding: 0 26rpx;
			overflow: scroll;

			.form-list {
				background-color: #ffffff;
				border-radius: 24rpx;
				font-size: 28rpx;
				margin: 20rpx 0;

				.form-item {
					display: flex;
					align-items: center;
					padding: 30rpx 35rpx;
					border-bottom: 1px solid #ededed;

					&:last-child {
						border-bottom: none;
					}

					.item-label {
						display: inline-block;
						width: 150rpx;
						text-align: right;
						padding-right: 20rpx;
					}

					.item-content {
						flex: 1;
						padding-right: 35rpx;
					}

					.item-radio {
						.radio-custom {
							margin-bottom: 22rpx;
							align-items: flex-start;
						}
					}

					.item-other {
						padding-left: 35rpx;
					}

					.divider {
						position: relative;

						&::before {
							display: block;
							content: "";
							position: absolute;
							top: 0;
							left: 0;
							width: 1px;
							height: 100%;
							background-color: #707070;
						}
					}
				}

				.form-align-top {
					align-items: flex-start;
				}

				.require-item {
					.item-label {
						display: inline-flex !important;
						justify-content: flex-end;
						align-items: center;

						&::before {
							content: "*";
							color: red;
							margin-right: 6rpx;
						}
					}
				}
			}

			.upload-box {
				padding: 30rpx 35rpx;

				.upload-title {
					margin-bottom: 20rpx;
				}
			}
		}

		.footer-fixed {
			width: 100%;
			box-sizing: border-box;
			padding: 26rpx 38rpx;
			background-color: white;
		}
	}
</style>
